iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 25
1
Modern Web

.Net Core 網站開發 101系列 第 25

Tag Helpers 標籤輔助程式

  • 分享至 

  • xImage
  •  

這啥?

Tag Helpers 可以讓後端程式碼介入 Razor 產生 HTML 的過程中。例如 ImageTagHelper 可以幫圖片路徑加上版本編號,圖片修改後就會產生一個新的版本,以保證客戶端不會用到瀏覽器快取的圖片。使用 Tag Helpers 時,大部分都看起來像是 HTML。熟悉前端相關技術的開發人員不用再額外學太多 Razor 語法。大部分原生的 HTML 標籤都有提供框架內建的 Tag Helpers

管理 Tag Helpers 範圍

可以透過 @addTagHelper@removeTagHelper! 來管理 Razor View 中所使用的 Tag Helpers。

~/Views/_ViewImports.cshtml 中加入下列程式碼,可以讓 Tag Helpers 在所有的 View 中都可以被使用。@addTagHelper 需要兩個參數,, 後為 Tag Helpers 的來源組件 (assembly)名稱,, 前則為此組件下要被加入的標籤名稱,* 代表加入全部。

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

下列程式碼則是可以刪除 Tag Helpers,跟 @addTagHelper 一樣有兩個參數,意思也一樣:

@removeTagHelper Microsoft.AspNetCore.Mvc.TagHelpers.ImageTagHelper, Microsoft.AspNetCore.Mvc.TagHelpers

! 則是可以跳脫單一標籤,使其不使用 Tag Helpers。標籤開頭跟結尾都要記得要有 !

<!span asp-validation-for="Email" class="text-danger"></!span>

或者也可以使用 @tagHelperPrefix 來限制只有特定前置詞的標籤才會使用 Tag Helpers,例如將下列程式碼新增到 ~/Views/_ViewImports.cshtml 之後:

@tagHelperPrefix ironman:

Razor 中就只有以 ironman: 開頭的標籤才會使用 TagHelpers。

<ironman:partial name="_ItemPartial" model="item"/>
<img src="~/images/banner1.svg" /> <!-- 這個就是單純的 HTML -->

自己建立 Tag Helpers

實作 ITagHelper 的類別都可以是 Tag Helper,但一般會繼承 TagHelper 類別,以便使用 Process 方法。

這邊舉個例子,用 Tag Helper 來輸出範本的 footer 中的版權宣告。原本 HTML 是這樣:

<footer>
    <p>&copy; 2018 - ironman2018</p>
</footer>

預計可以改成這樣:

<footer>
    <copyright project-name="ironman2018"></copyright>
</footer>

首先建立一個 CopyrightTagHelper 類別,TagHelper 前即為標籤名稱,在 Razor 中使用時會轉換成 kebab case

public class CopyrightTagHelper : TagHelper
{
    public string ProjectName { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "p";

        output.Attributes.Add("style", "color: red");
        output.Content.SetHtmlContent($"&copy; {DateTime.Now.Year} - {ProjectName}");
    }
}

output.TagName = "p"; 是設定輸出的標籤名稱。

output.Attributes.Add(key, value) 是為輸出的標籤設定屬性。

output.Content.SetContent(content) 則是設定輸出標籤的文字內容,會轉換 HTML entities,所以範例中使用 SetHtmlContent 來正確輸出 &copy;

建立類別後要將組件中的 Tag Helper 加進 Razor 中使用,需要在 ~/Views/_ViewImports.cshtml 中加入這行,意思是加入 ironman2018 組件中所有的 Tag Helper:

@addTagHelper *, ironman2018

參考資料


其實這功能滿好玩的XD 要寫客製化標籤輸出的方式比以前 HtmlHelpers 方便不少,今天就先介紹到這啦~


上一篇
Views 視圖
下一篇
Filters 過濾器
系列文
.Net Core 網站開發 10131
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言